<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <style>
      body{
        padding: 0px;
        margin: 0px;
      }
      .circle-wrap-loading {
        width: 300px;
        height: 300px;
        position: fixed;
        display: flex;
        font-size: 22px;
        top: 50%;
        flex-direction: column;
        z-index: 9999999999;
        left: 50%;
        align-items: center;
        margin-left: -150px;
        margin-top: -150px;
      }
      .circle-wrap-loading h3{
        color: #6c6c6c;
        margin-top: 2px;
        font-weight: bold;
        font-size: 20px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
      }
      .circle-wrap-loading .circle {
        height: 54px;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
        width: 2em;
      }

      .circle-wrap-loading .circle span {
        width: 0.3em;
        height: 1em;
        background-color: #3cefff;
      }

      .circle-wrap-loading .circle span:nth-of-type(1) {
        animation: grow 1s -0.45s ease-in-out infinite;
      }

      .circle-wrap-loading .circle span:nth-of-type(2) {
        animation: grow 1s -0.3s ease-in-out infinite;
      }

      .circle-wrap-loading .circle span:nth-of-type(3) {
        animation: grow 1s -0.15s ease-in-out infinite;
      }

      .circle-wrap-loading .circle span:nth-of-type(4) {
        animation: grow 1s ease-in-out infinite;
      }

      @keyframes grow {
        0%,
        100% {
          transform: scaleY(1);
        }

        50% {
          transform: scaleY(2);
        }
      }

    </style>
    <!-- <script defer src="config/index.js"></script> -->
    <script  src="/config/index.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <div id="6s66">{{name}}</div>
    <div id="animate-wrap" class="circle-wrap-loading">
      <div class="circle">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <h3>正在加载页面....</h3>
    </div>
    <script>
      window.animateDom = document.getElementById('animate-wrap')
      window.clearScreenLoading = function(){
        if (window.animateDom && window.animateDom.parentNode) {    // 移除首屏动画  DOM
          // window.animateDom.style.display = 'none'
          window.animateDom.parentNode.removeChild(window.animateDom)
          window.animateDom = null
        }
      }
    </script>
    <!-- built files will be auto injected -->
  </body>
</html>
